<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery-动画</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/tabdemo.css" />
	<script src="js/jquery-3.5.1.min.js"></script>
	<style type="text/css">
		body {
			background-color: #000000;
			position: relative;
		}

		img {
			width: 200px;
			height: 200px;
		}

		#img1 {
			position: absolute;
		}

		#img2 {
			margin-top: 100px;
			margin-left: 300px;
		}
	</style>
	<body>
		<button id="btn"><a href="tab_task.html">点击到商品练习页面</a></button>
		<div id="player"><img src="img/player3.gif" id="img1"></div>
		<div id="pet"><img src="img/pet.gif" id="img2"></div>
	</body>
</html>
<script type="text/javascript">
	//179000516 王德令
	$(document).ready(function() {
		$(document).click(function(event) {
			$("#img1").finish();
			//获取当前位置
			x = $("#img1").offset().left; 			
			y = $("#img1").offset().top;
			//鼠标点击的位置
			var xx = event.clientX; 			
			var yy = event.clientY;
			//判断左移还是右移
			if (xx - x > 0) { 
				$("#img1").attr("src", "img/player_right.gif");
				$("#img1").animate({
					left: xx - 50,
					top: yy - 50,
				}, 1000, function() {
					$("#img1").attr("src", "img/player3.gif");
				});
				x = $("#img1").offset().top;
				y = $("#img1").offset().left;
			} else {
				$("#img1").attr("src", "img/player_left.gif");
				$("#img1").animate({
					left: xx - 50,
					top: yy - 50,
				}, 1000, function() {
					$("#img1").attr("src", "img/player3.gif");
				});
				x = $("#img1").offset().top;
				y = $("#img1").offset().left;
			}
			console.log(x, y, event.clientX, event.clientY);
		});
		$(document).dblclick(function() {
			$("#img1").attr("src", "img/player1_big.gif");
		});
		$("#img2").click(function() {
			setTimeout(test,1000);
			setTimeout(test1,1100);
			});
			function test(){
				$("#img2").hide();
			}
			function test1(){
				$("#img1").attr("src","img/player1.gif");
			}
	});
</script>
